$(document).ready(function() {

	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();
	
	// calendar container
	var $container = $('div#fullcalendar');

	$container.fullCalendar({
		header: {
			left: 'prev,next today',
			right: 'month,agendaWeek,agendaDay',
			center: 'title'
		},
		buttonText: {
			prev: '<span class="caret left"></span>',
			next: '<span class="caret right"></span>',
			today: 'today',
			month: 'month',
			week: 'week',
			day: 'day'
		},
		editable: true,
		events: [{
				title: 'All Day Event',
				start: new Date(y, m, 1)
			},{
				title: 'Long Event',
				start: new Date(y, m, d-5),
				end: new Date(y, m, d-2)
			},{
				id: 999,
				title: 'Repeating Event',
				start: new Date(y, m, d-3, 16, 0),
				allDay: false
			},{
				id: 999,
				title: 'Repeating Event',
				start: new Date(y, m, d+4, 16, 0),
				allDay: false
			},{
				title: 'Meeting',
				start: new Date(y, m, d, 10, 30),
				allDay: false
			},{
				title: 'Lunch',
				start: new Date(y, m, d, 12, 0),
				end: new Date(y, m, d, 14, 0),
				allDay: false
			},{
				title: 'Birthday Party',
				start: new Date(y, m, d+1, 19, 0),
				end: new Date(y, m, d+1, 22, 30),
				allDay: false
			},{
				title: 'Click for Google',
				start: new Date(y, m, 28),
				end: new Date(y, m, 29),
				url: 'http://google.com/'
			}
		]
	});

	// set some different day to prove the buttons
	//$container.fullCalendar('gotoDate', 2005, 11, 19);

	// building calendar menu options
	var $containerMenu = $('div#calendar ul.dropdown-menu');

	// add button new event
	$containerMenu.append( $('<li><a href="#" tabindex="-1">New Event</a></li>') );

	// add button today
	$containerMenu.append( $('<li><a href="#" tabindex="-1" data-view="today"></a></li>') )
		.find('li:last-child a').append( $container.find('span.fc-button-today span.fc-button-content').html() );

	$containerMenu.append( $('<li class="divider"></li>') );

	// add button agendaDay
	$containerMenu.append( $('<li><a href="#" tabindex="-1" data-view="agendaDay"></a></li>') )
		.find('li:last-child a').append( $container.find('span.fc-button-agendaDay span.fc-button-content').html() );

	// add button agendWeek
	$containerMenu.append( $('<li><a href="#" tabindex="-1" data-view="agendaWeek"></a></li>') )
		.find('li:last-child a').append( $container.find('span.fc-button-agendaWeek span.fc-button-content').html() );

	// add button month
	$containerMenu.append( $('<li><a href="#" tabindex="-1" data-view="month"></a></li>') )
		.find('li:last-child a').append( $container.find('span.fc-button-month span.fc-button-content').html() );

	// menu buttons event handler
	$containerMenu.find('li a').click(function(e) {
		e.preventDefault();
		var view = $(this).attr('data-view');

		switch(view){
			case 'today':
				$container.fullCalendar('today');
				break;
			
			case 'agendaDay':
				$container.fullCalendar('changeView', view);
				break;

			case 'agendaWeek':
				$container.fullCalendar('changeView', view);
				break;

			case 'month':
				$container.fullCalendar('changeView', view);
				break;
		}
		updateTitle();
	});

	$container.prepend( $('<div class="header-calendar"></div>') );
	var $headerCalendar = $container.find('div.header-calendar');
	$headerCalendar.append( $container.find('span.fc-button-prev span.fc-button-content').html());
	$headerCalendar.append( $container.find('span.fc-button-next span.fc-button-content').html());
	$headerCalendar.append( $container.find('span.fc-header-title').html());

	$('span.caret.left').click(function (){
		$container.fullCalendar('prev');
		updateTitle();
	});

	$('span.caret.right').click(function (){
		$container.fullCalendar('next');
		updateTitle();
	});

	$container.find('table.fc-header').remove();

	// Update the calendar title
	function updateTitle() {
		var view = $container.fullCalendar('getView');

		$container.find('h2').html(view.title);
	}

});